<template>
	<view class="container">
		<image class="index-bg" :src="imgUrl + '/banner.png'" mode="widthFix"></image>
		<u-navbar title="投件信息" autoBack safeAreaInsetTop fixed bgColor="transparent" titleStyle="color: #ffffff;" leftIconSize="40" leftIconColor="#ffffff"></u-navbar>
		<view class="content">
			<view class="tabs"><u-tabs @change="change" :scrollable="false" :list="tabs" lineWidth="60rpx" lineHeight="10"></u-tabs></view>
			<view class="form">
				<u--form :model="formData" :rules="rules" ref="form">
					<view class="form-item">
						<view class="form-item-title">收件信息</view>
						<view class="form-item-input">
							<u-form-item customStyle="background: #F4F6F9;border-radius: 44rpx;padding: 10rpx 20rpx;margin-bottom: 10rpx;" prop="mailNo">
								<u--input border="none" v-model="formData.mailNo" clearable placeholder="邮件号" shape="circle"></u--input>
								<view class="input-right-icon" slot="right"><u-icon name="scan" size="44"></u-icon></view>
							</u-form-item>
						</view>
						<view class="form-item-input">
							<u-form-item customStyle="background: #F4F6F9;border-radius: 44rpx;padding: 10rpx 20rpx;margin-bottom: 10rpx;" prop="phone">
								<u--input border="none" v-model="formData.phone" clearable placeholder="手机号码" shape="circle"></u--input>
							</u-form-item>
						</view>
						<view class="form-item-input">
							<u-form-item customStyle="background: #F4F6F9;border-radius: 44rpx;padding: 10rpx 20rpx;margin-bottom: 10rpx;" prop="roomid">
								<u--input border="none" v-model="formData.roomid" clearable placeholder="房间号" shape="circle"></u--input>
							</u-form-item>
						</view>
					</view>

					<view class="form-item">
						<view class="form-item-title">物品信息</view>
						<u-upload
							width="160rpx"
							height="160rpx"
							@afterRead="afterRead"
							:fileList="fileList1"
							@delete="deletePic"
							name="1"
							multiple
							:maxCount="2"
							previewFullImage
						></u-upload>
					</view>

					<view class="form-item">
						<view class="form-item-title">选择类型</view>
						<view class="boxs">
							<block v-for="(item, index) in boxs" :key="index">
								<view :class="['box', { 'box-active': index == formData.boxNo }]" @tap="onBox(index)">
									<view class="box-top">{{ item.name }}</view>
									<view class="box-bottom">{{ item.desc }}</view>
								</view>
							</block>
						</view>
					</view>
				</u--form>
			</view>

			<view class="statusbar"></view>
		</view>
		<view class="btn button-primary" @tap="submit">提交表单</view>
	</view>
</template>

<script>
import { getQrQuery } from '@/utils/index';
export default {
	name: 'index',
	data() {
		return {
			imgUrl: '',
			boxs: [{ name: '小格口', desc: '简介简介简介...' }, { name: '中格口', desc: '简介简介简介...' }, { name: '大格口', desc: '简介简介简介...' }],
			formData: {
				mailNo: '',
				phone: '',
				roomid: '',
				boxNo: 0
			},
			fileList1: [],
			current: 0,
			tabs: [
				{
					name: '包裹'
				},
				{
					name: '普邮'
				}
			],
			rules: {
				mailNo: {
					type: 'string',
					required: true,
					message: '请填写有效的邮件号码',
					trigger: ['blur', 'change']
				},
				phone: {
					type: 'string',
					required: true,
					message: '请填写有效的手机号码',
					trigger: ['blur', 'change'],
					pattern: /^1[3456789]\d{9}$/
				},
				roomid: [
					{
						type: 'string',
						validator: (rule, value, callback) => {
							if (this.current == 1) {
								return value.trim() ? true : false;
							} else {
								return true;
							}
						},
						message: '请填写的房间号',
						trigger: ['blur', 'change']
					}
				]
			}
		};
	},
	onLoad() {
		this.imgUrl = this.resBaseUrl;
		// let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		// this.menuButtonInfo = menuButtonInfo;
		// console.log(menuButtonInfo);
		// this.areaList()
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
	},
	methods: {
		areaList(){
			this.$api.areaList().then(res => {
				
			})
		},
		onBox(e) {
			this.formData.boxNo = e;
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map(item => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				// const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: ''
						// url: result
					})
				);
				fileListLen++;
			}
		},
		// 删除图片
		deletePic(event) {
			console.log(event);
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		change(e) {
			this.current = e.index;
			this.$refs.form.clearValidate();
		},
		submit(e) {
			var that = this;
			this.$refs.form.validate().then(res => {
				// this.$api.applyManage().then(res => {
					
				// })
				uni.$u.route({
					type: 'redirectTo',
					url: '/pages/result/index'
				});
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.container {
	position: relative;
	.index-bg {
		width: 100%;
		height: 422rpx;
	}
	.content {
		z-index: 11;
		width: 100%;
		position: absolute;
		top: 290rpx;
		left: 0;
		.tabs {
			background-color: #fff;
			height: 88rpx;
			border-radius: 44rpx;
			width: 688rpx;
			margin: 0 auto;
		}
		.form {
			padding: 44rpx 0 0;
			.form-item {
				margin-top: 32rpx;
				padding: 0 32rpx;
				border-radius: 20rpx;
				background-color: #fff;
				.form-item-title {
					font-weight: bold;
					font-size: 30rpx;
					color: #000000;
					padding: 20rpx 0;
				}
				.form-item-input {
					min-height: 60px;
				}
			}
			.input-right-icon {
				margin-left: 20rpx;
			}
		}
		.statusbar {
			width: 100%;
			height: calc(env(safe-area-inset-bottom) + 120rpx);
		}
	}
	.btn {
		z-index: 22;
		position: fixed;
		width: 688rpx;
		left: 50%;
		transform: translateX(-50%);
		bottom: env(safe-area-inset-bottom);
	}

	.boxs {
		width: 100%;
		.box {
			padding-left: 32rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 160rpx;
			border-radius: 32rpx;
			transition: all 0.3s;
			margin-bottom: 24rpx;
			border: 2rpx solid #e6e7ed;
			width: 100%;
			.box-top {
				font-weight: bold;
				margin-bottom: 10rpx;
			}
			.box-bottom {
				font-size: 24rpx;
				color: #586474;
			}
		}
		.box-active {
			border-color: #000;
		}
	}
}
</style>
